import Vue from "vue";
import VueRouter from "vue-router";
import Login from "../views/login/Login";
import Layout from "../layout/layout"

Vue.use(VueRouter);

const routes = [
  { path: "/", meta: { title: '登录页面' }, redirect: "/login" },
  { path: "/login", meta: { title: '登录页面' }, component: Login },
  { path: "/test", meta: { title: '首页' }, component: () => import("@/views/test") },

  {
    path: `/home`,
    component: Layout,
    name: 'home',
    redirect: `/home/index`,
    meta: { title: 'home' },
    hidden: true,
    children: [
      {
        path: 'index',
        component: () => import('@/views/home/index'),
        name: 'homeIndex',
        hidden: true,
        meta: { title: '首页' }
      }
    ]
  },

  //基础
  {
    path: "/demo",
    name: "demo",
    component: Layout,
    meta: {
      title: '基础'
    },
    redirect: `/demo/index/test1`,
    children: [
      {
        path: "test1",
        name: "Test1",
        component: () => import("@/views/demo/test1.vue"),
        meta: {
          title: 'Vue.nextTick()'
        },
      },
      {
        path: "test2",
        name: "Test2",
        component: () => import("@/views/demo/test2.vue"),
        meta: {
          title: '组件通讯'
        },
      },
      {
        path: "call",
        name: "call",
        component: () => import("@/views/demo/call.vue"),
        meta: {
          title: 'call&apply'
        },
      },
      {
        path: "mvvm",
        name: "mvvm",
        component: () => import("@/views/demo/mvvm.vue"),
        meta: {
          title: 'mvvm'
        },
      },
      {
        path: "prototype",
        name: "prototype",
        component: () => import("@/views/demo/prototype.vue"),
        meta: {
          title: 'prototype'
        },
      },
      {
        path: "arguments",
        name: "arguments",
        component: () => import("@/views/demo/arguments.vue"),
        meta: {
          title: 'arguments'
        },
      },
      {
        path: "dataType",
        name: "dataType",
        component: () => import("@/views/demo/dataType.vue"),
        meta: {
          title: '数据类型'
        },
      },
      {
        path: "deepCopy",
        name: "deepCopy",
        component: () => import("@/views/demo/deepCopy.vue"),
        meta: {
          title: '实现深拷贝'
        },
      },
      {
        path: "closedBa",
        name: "closedBa",
        component: () => import("@/views/demo/closedBa.vue"),
        meta: {
          title: '闭包'
        },
      },
    ]
  },

  //路由钩子
  {
    path: "/routerHook",
    name: "routerHook",
    component: Layout,
    meta: {
      title: '路由钩子函数'
    },
    redirect: `routerHook/beforeEach`,
    children: [
      {
        path: "beforeEach",
        name: "beforeEach",
        component: () => import("@/views/routerHook/beforeEach.vue"),
        meta: {
          title: '全局守卫'
        },
      },
      {
        path: "beforeEnter",
        name: "beforeEnter",
        component: () => import("@/views/routerHook/beforeEnter.vue"),
        meta: {
          title: '路由独享守卫'
        },
      },
      {
        path: "beforeRoute",
        name: "beforeRoute",
        component: () => import("@/views/routerHook/beforeRoute.vue"),
        meta: {
          title: '组件内的守卫'
        },
      },
    ]
  },

  //promise
  {
    path: "/promise",
    name: "promise",
    component: Layout,
    meta: {
      title: '手写promise'
    },
    redirect: `/promise/promise`,
    children: [
      {
        path: "promise",
        name: "promise",
        component: () => import("@/views/promise/promise.vue"),
        meta: {
          title: 'promise'
        },
      },
    ]
  },

  //设计模式
  {
    path: "/designMode",
    name: "designMode",
    component: Layout,
    meta: {
      title: '设计模式'
    },
    redirect: `/designMode/Observer`,
    children: [
      {
        path: "Observer",
        name: "Observer",
        component: () => import("@/views/designMode/Observer.vue"),
        meta: {
          title: '发布订阅'
        },
      },
      {
        path: "visitorPattern",
        name: "visitorPattern",
        component: () => import("@/views/designMode/visitorPattern.vue"),
        meta: {
          title: '访问者模式'
        },
      }
    ]
  },

  //css
  {
    path: "/cssBox",
    name: "cssBox",
    component: Layout,
    meta: {
      title: 'css'
    },
    redirect: `/cssBox/transition`,
    children: [
      {
        path: "transition",
        name: "transition",
        component: () => import("@/views/cssBox/transition.vue"),
        meta: {
          title: 'transition'
        },
      },
      {
        path: "box",
        name: "box",
        component: () => import("@/views/cssBox/box.vue"),
        meta: {
          title: '盒子模型'
        },
      },
    ]
  },


];

const router = new VueRouter({
  mode: "history",
  routes,
});

//路由相同路由重复点击导致浏览器报错
const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (to) {
  return VueRouterPush.call(this, to).catch(err => err)
}

// //挂在路由守卫，用于监听是否存在token
router.beforeEach((to, from, next) => {
  //to将要访问的路径
  //from代表从哪个路径进来
  //next是一个函数，表示放行
  if (to.path === '/login') return next()
  // const tokenStr = window.sessionStorage.getItem('token')
  // if (!tokenStr) return next('/login')
  next()
})


//封装routes到菜单栏
export function createRoute() {
  // console.log(routes);
  let routesList = []
  for(let item of routes) {
    if(item.children) {
      routesList.push(item)
    }
  }
  routesList.shift()
  return routesList;
}

export default router;
